<template lang="pug">
    div(class="batman-following-list")
        paged-panel(v-model="page", @scroll-bottom="getMyFollowers",:completed="loadCompleted", i-class="main-body-height")
            div(class="batman-following-list__item", v-for="item in paged.items", :key="item.wxUId")
                    div(class="batman-following-list__item_avatar")
                        el-image(:src="item.avatar", fit="fit")
                    div(class="batman-following-list__item_wxname")
                        span {{item.wxName}}
</template>

<script>
import BaseVue from "@/mixins/BaseVue";
import axios from "@/plugins/axios";
import PagedPanel from "batman-paged-panel";
import util from "@/libs/util";

export default {
  mame: "following-list",
  mixins: [BaseVue],
  components: { "paged-panel": PagedPanel },
  data() {
    return {
      page: { maxResultCount: 25, skipCount: 0 },
      paged: { items: [] },
      loadCompleted: false
    };
  },
  props: {
    "wx-uid": { type: String, default: null }
  },
  computed: {
    follower() {
      return this.wxUid || util.cookies.get("wxuid");
    },
    filter(){
      return { follower: this.follower }
    }
  },
  methods: {
    getMyFollowers(resolve) {
      
      const options = {
        url: "forum/follow/theFollower",
        method: "post",
        data: { page: this.page, filter: this.filter }
      };

      axios(options)
        .then(this.getMyFollowersSuccess)
        .catch(() => {})
        .then(() => resolve());
    },
    getMyFollowersSuccess(paged) {
      if (paged.items.length === 0) {
        this.loadCompleted = true;
        return;
      }
      this.paged.items = this.paged.items.concat(paged.items);
    }
  }
};
</script>

<style lang="less">
@import "../../common/common.less";

.batman-following-list {
  background-color: @page_background;
  min-height: calc(100vh - @navigate_bottom_height);

  &__item {
    display: flex;
    background-color: white;
    padding: 10px;
    align-content: center;
    @width: 35px;

    &_avatar {
      width: @width;
      height: @width;
    }

    &_wxname {
      padding: 0 10px;
      line-height: @width;
    }
  }
}
</style>